<template>
<!-- 销售退货明细统计表 -->
  <div class="pages salesReturn">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form>
           <el-row>
               <el-col :span="6">
                <el-form-item label="商户:" label-width="100px">
                  <el-input class="input" :disabled="true" clearable v-model="companyName" size="small" placeholder="输入商户编号/名称"></el-input>
                </el-form-item>
               </el-col>
               <el-col :span="6">
                <el-form-item label="客户:" label-width="100px">
                  <!-- <el-input class="input" clearable v-model="selectdata.supplierLabel" size="small" placeholder="输入客户编号/名称"></el-input> -->
                  <el-select  size="small" filterable style="width:190px" v-model="selectdata.supplierLabel" placeholder="请先选择客户名称">
                   <el-option v-for="(item,index) in selectBaseShopPageLists" :key="index" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="" label-width="10px">
                 <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
                 </el-form-item>
                  <el-form-item label="" label-width="10px">
                 <el-button type="primary" v-if="setRole('导出')" size="mini" class="Button" @click="download">导出</el-button>
                 </el-form-item>
               </el-col>
           </el-row>
          <el-row>
             <el-col :span="6">
              <el-form-item label="开始时间:" label-width="100px" class="billdata">
               <el-date-picker class="delete" style="width:190px" value-format="yyyy-MM-dd" size="small" v-model="selectdata.startTime" type="date" placeholder="选择日期">
               </el-date-picker>
              </el-form-item>
             </el-col>
              <el-col :span="6">
              <el-form-item label="结束时间:" label-width="100px" class="billdata">
               <el-date-picker class="delete" style="width:190px" value-format="yyyy-MM-dd" size="small" v-model="selectdata.endTime" type="date" placeholder="选择日期">
               </el-date-picker>
              </el-form-item>
             </el-col>
          </el-row>
         <el-row>
            <el-col :span="6">
             <el-form-item label="商品条码:" label-width="100px">
               <el-input class="input" clearable v-model="selectdata.barCode" size="small" placeholder="输入商品条码"></el-input>
             </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品货号:" label-width="100px">
               <el-input class="input" clearable v-model="selectdata.goodsCode" size="small" placeholder="输入商品货号"></el-input>
             </el-form-item>
            </el-col>
            <el-col :span="6">
             <el-form-item label="商品分类:" label-width="100px">
               <el-cascader size="small" change-on-select style="width:190px" expand-trigger="hover" :options="commodityCategoryfunList" v-model="selectdata.primaryClassifyId" >
                </el-cascader>
             </el-form-item>
            </el-col>
         </el-row>
         <el-row>
             <el-col :span="6"> 
                <el-form-item label="商品批次:" label-width="100px">
                   <el-input class="input" clearable v-model="selectdata.goodsBatchNumber" size="small" placeholder="输入商品批次"></el-input>
                </el-form-item>
             </el-col>
             <el-col :span="6">
              <el-form-item label="商品名称:" label-width="100px">
                <el-input class="input" clearable v-model="selectdata.goodsName" size="small" placeholder="输入商品名称"></el-input>
              </el-form-item>
             </el-col>
             <el-col :span="6">
              <el-form-item label="商品品牌:" label-width="100px">
               <el-select  size="small" filterable style="width:190px" v-model="selectdata.goodsLabelId" placeholder="请先选择商品品牌">
                 <el-option v-for="(item,index) in commodityBrandList" :key="index" :label="item.name" :value="item.id"> </el-option>
               </el-select>
              </el-form-item>
             </el-col>
         </el-row>
     </el-form>

      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table  :data="qutboundStatisticsList" stripe style="width: 100%" show-summary :summary-method="getSummaries">
          <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
          <el-table-column prop="shopName" label="商户名称" align="center" width="100"></el-table-column>
          <el-table-column prop="supplierName" label="客户名称" align="center"></el-table-column>
          <el-table-column prop="barCode" label="商品条码" align="center"></el-table-column>
          <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="goodsBatchNumber" label="批次" align="center"></el-table-column>
          <el-table-column prop="goodsSpec" label="商品规格" align="center" width="150">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.goodsSpec" :key="index">
                <span v-if="item!=null">{{item.paramName}} :</span>
                <span v-if="item!=null"> {{item.paramValue}} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="primaryClassifyName" label="商品分类" align="center" width="150"></el-table-column>
          <el-table-column prop="brand" label="商品品牌" align="center" ></el-table-column>
          <el-table-column prop="goodsUnitName" label="单位" align="center" ></el-table-column>
          <el-table-column prop="returnNum" label="退货数量" align="center" ></el-table-column>
          <el-table-column prop="returnAmount" label="退货金额" align="center"></el-table-column>
       </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="selectdata.pageNum" :page-sizes="[10,20]" :page-size="selectdata.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
 </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { getRepositoryListPage, getGoodsClassifyTreeList, getGoodsLabelListByShopId, downloadIncomeAccountList, listOrderGoodsPurchaseReturnDetails, listOrderGoodsPurchaseReturnDetailsExport ,selectBaseShopPageList} from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId","power","companyName"]),
  data() {
    return {
      selectdata: {
        flag: "S",  // S:销售退货统计明细报表查询 P:采购退货明细统计报表查询
        shopLabel: "", // 商户id
        supplierLabel: "", // 客户
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        barCode: "", // 商品条码
        goodsCode: "", // 商品货号
        primaryClassifyId: [""], // 商品分类id
        goodsBatchNumber: "", //商品批次
        goodsName: "", // 商品名称
        goodsLabelId: "", // 商品品牌
        pageNum: 1, // 页数
        pageSize: 10, // 每页几条
        isStore:"1"
      },
      data: {}, // 当前列表的信息条件
      totalItems: 0, // 总条数
      qutboundStatisticsList: [],
      returnNumAll: "", // 退货总数量
      returnAmountAll: "", // 退货总金额
      commodityCategoryfunList: [], //商品品类数组
      commodityBrandList: [], //商品品牌数组
      shopPullDownList: [], //店铺下拉
      selectBaseShopPageLists:[]//客户数组
    };
  },
  created() {},
  mounted() {
    this.commodityCategoryfun();
    this.commodityBrand();
    this.init()
    this.baseShopPageList()
  },
  methods: {
      init(){
        this.selectdata.shopLabel= this.merchantId
      },
    setRole (key) {
     return util.selectTitle(this.power, key)
     },
    // 获取表格数据
    tableget() {
      if (this.selectdata.startTime == '' || this.selectdata.endTime == '') {
        this.$message({
            type: "error",
            message: "开始时间和结束时间必选"
        });
        return false
      }else if(this.selectdata.startTime > this.selectdata.endTime){
         this.$message({
          type: "error",
          message: "请确定开始日期小于或等于结束日期"
        });
      }else{
       let startTime = new Date(this.selectdata.startTime + " 00:00:00").getTime() || '',
          endTime = new Date(this.selectdata.endTime + " 23:59:59").getTime() || '',
          primaryClassifyId = this.selectdata.primaryClassifyId[this.selectdata.primaryClassifyId.length-1] || '';
       this.data = JSON.parse(JSON.stringify(this.selectdata));
       this.data.startTime = startTime;
       this.data.endTime = endTime;
       this.data.primaryClassifyId = primaryClassifyId;
       listOrderGoodsPurchaseReturnDetails(this.data).then(res => {
        this.totalItems = res.data.pageTotal;
        this.qutboundStatisticsList = res.data.list;
        this.returnNumAll = res.data.returnNumAll; // 退货总数量
        this.returnAmountAll = res.data.returnAmountAll // 退货总金额
       });
      }
    },

    // 搜索
    searchSelect() {
      this.selectdata.pageNum = 1
      this.tableget();
    },
    handleSizeChange(val) {
      this.selectdata.pageSize = val;
      this.selectdata.pageNum = 1;
      this.tableget();
    },
    handleCurrentChange(val) {
      this.selectdata.pageNum = val;
      this.tableget();
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let a={
           value:"",
           label:"全部",
          }
        res.data.unshift(a)
        this.commodityCategoryfunList = res.data;
      });
    },
    // 商品品牌
    commodityBrand() {
      getGoodsLabelListByShopId({
        labelType: "0",
        shopId: this.merchantId
        }).then(res => {
           let a={
           id:"",
           name:"全部",
          }
        res.data.list.unshift(a)
        this.commodityBrandList = res.data.list;
      })
    },
       // 客户列表
   baseShopPageList(){
    selectBaseShopPageList({
     businessId:this.merchantId,
     type:"1"
    }).then(res=>{
       let a={
           id:"",
           name:"全部",
          }
        res.data.list.unshift(a)
     this.selectBaseShopPageLists=res.data.list
      
   })
  },
    // 导出
    download() {
      if (this.qutboundStatisticsList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        listOrderGoodsPurchaseReturnDetailsExport(this.data).then(res => {
          let fileName = "销售退货明细统计表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    // 合计下面那一列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "汇总";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[11] = this.returnNumAll;
        sums[12] = this.returnAmountAll
      });
      return sums;
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.salesReturn .delete .el-input__suffix {
  display: none;
}
.salesReturn .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.salesReturn .el-form-item {
  margin-bottom: 10px;
}

</style>



